import React, { Component } from 'react';
import './index.css'

class List extends Component {
    render() {
        const { users, isWelcome, isLoading, err } = this.props;
        // avatar_url头像 html_url主页地址 login用户名 id-id 
        return (
            <div className='album'>
                {
                    isWelcome ? <h2>Welcome to Github Searching System!</h2> :
                    isLoading ? <h2>Loading...</h2> :
                    err ? <h2 style={{color: 'red'}}>{err}</h2> :
                    users ? <h2>The user is not found!</h2> :
                    users.map((userObj) => {
                        return (
                            <div className="card" key={userObj.id}>
                                <a href={`${userObj.html_url}`} target='_blank' rel='noreferrer' className="card-text">
                                    <img src={`${userObj.avatar_url}`} style={{ width: '100px' }} alt="avatar" />
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        );
                    })
                }
            </div>
        );
    }
}

export default List;